<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 筛选 -->
        <el-form
          :model="form"
          ref="form"
        >
          <div class="filter-container">
            <el-row>
              <el-col :span="20">
                <el-form-item
                  label="关键字："
                  prop="id"
                >
                  <el-input
                    @keyup.enter="hQuery"
                    style="width: 380px;"
                    placeholder="根据编号搜索"
                    class="filter-item"
                    v-model="form.id"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button
                    :loading="isLoading"
                    size="small"
                    type="primary"
                    @click="hQuery"
                  >筛选</el-button>
                  <el-button
                    size="small"
                    @click="hResetForm"
                  >清空</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>

        <!-- 数据记录 -->
        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="companys"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
          >
            <template #default="{ row }">
              <span>{{row.id}}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="题型"
            width="70"
          >
            <template #default="{  row }">
              <span v-if="row.questionType==1"> 单选</span>
              <span v-else-if="row.questionType==2"> 多选</span>
              <span v-else-if="row.questionType==3"> 简答</span>
            </template>
          </el-table-column>

          <el-table-column label="题目编号">
            <template #default="{ row }">
              <!-- <button>试题的id</button> -->
              <ul class="questionIDs">
                <li
                  v-for="item in row.questionIDs"
                  :key="item.number"
                  @click="showDialog(item.id)"
                >{{item.number}}</li>
              </ul>
              <!-- <span></span> -->
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template #default="{ row }">
              <span>{{row.addTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="答题时间（s）"
          >
            <template #default="{ row }">
              <span>{{row.totalSeconds}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="正确率(%)"
          >
            <template #default="{ row }">
              <span>{{row.accuracyRate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="录入人"
          >
            <template #default="{ row }">
              <span>{{row.userName}}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <el-button
                v-if="row.status!='deleted'"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="hDelete(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div
          class="pagination"
          v-show="total"
        >
          <div class="pages">
            <el-pagination
              background
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
              :current-page="Number(form.page)"
              :total="Number(total)"
              :page-size="Number(form.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-card>
      <!-- 弹层 -->
      <QpreView
        :visible.sync="isShowDialog"
        :title="cTitle"
        :isShowDialog="isShowDialog"
        @close="isShowDialog = false"
        :list="list"
      ></QpreView>

    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import QpreView from '@/module-hmmm/components/questions-preview.vue'
export default {
  name: 'QuestionsRandoms',
  components: {
    QpreView
  },
  data () {
    return {
      companys: [],
      total: 0,
      isLoading: false,
      isShowDialog: false,
      curCompanyId: null,
      list: {},
      id: '',
      // 查询表单中的参数
      form: {
        id: '',
        state: null,
        page: 1,
        pagesize: 20
      }
    }
  },
  created () {
    this.loadCompanys()
  },
  computed: {
    questionType () {
      return questionType
    },
    difficulty () {
      return difficulty
    },
    cResultTip () {
      return `共 ${this.total} 条记录`
    },
    cTitle () {
      return '题目预览'
    }
  },
  methods: {
    async showDialog (id) {
      this.isShowDialog = true
      // console.log(id)
      const { data: res } = await detail({ id })
      // console.log(res)
      this.list = res
    },
    dialogFormH () {
      this.isShowDialog = false
    },
    buildParams () {
      const paramsObj = {}
      const { page, pagesize, state, id } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.keyword = id || null
      paramsObj.state = state === '' ? null : state
      return paramsObj
    },
    // 获取列表数据
    async loadCompanys () {
      this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()

      try {
        const { data: res } = await randoms(paramsObj)
        // console.log(res)
        // 获取数据给companys
        this.companys = res.items
        // 获取总条数
        this.total = res.counts

        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.isLoading = true
      }
    },
    // 重置整个表单
    hResetForm () {
      this.$refs.form.resetFields()
      this.loadCompanys()
    },
    // 搜索信息
    hQuery () {
      // 重置页码
      this.form.page = 1
      // 重发请求
      this.loadCompanys()
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.loadCompanys()
      }
    },
    // 点击某一个页码
    hCurrentChange (curPage) {
      this.form.page = curPage
      this.loadCompanys()
    },
    async doDelete (id) {
      try {
        await removeRandoms({ id })
        this.$message.success('成功删除了用户!')
        this.loadCompanys()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    hDelete (userId) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doDelete(userId)
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.el-table .questionIDs {
  padding: 0;
  list-style: none;
  color: blue;
}
</style>
